<style lang="less">
.inpt{
    max-width: 320px;;
}
</style>
<template>
  <page-default>
<q-card style="width: 600px; max-width: 80vw;margin: 20px auto;">
        <q-card-section>
        <q-input v-model="midname" :disable="ctype" label="名称" />
        <div style="margin-top:10px;"></div>
        <q-select v-model="midtype" :options="options" label="Standard" />

        <div style="margin-top:10px;"></div>
        <editor   v-if="ready" v-model="yamlconf" @init="editorInit" lang="yaml" theme="chrome" width="100%" height="150"></editor>
        </q-card-section>


        <q-card-actions  v-if="canedit" align="right" class="bg-white text-teal">
          <q-btn flat label="保存" @click="saveupstream" />
        </q-card-actions>


      </q-card>


  </page-default>
</template>

<script>

import { mapActions, mapGetters } from 'vuex'
import DiyService from '../../../_services/DiyService'
import PageDefault from '../../../components/_commons/PageDefault'

export default {
  name: 'PageHTTPMiddlewares',
  components: {
    PageDefault,
    editor: require('vue2-ace-editor'),
  },
  data () {
    return {
      ctype: false,
      canedit: false,
      midname:"",
      ready: true,
      midtype:"",
      yamlconf:"",
      options:["addPrefix","stripPrefix","stripPrefixRegex","replacePath","replacePathRegex","chain","ipWhiteList","headers","errors","rateLimit","redirectRegex","redirectScheme","basicAuth","digestAuth","forwardAuth","inFlightReq","buffering","circuitBreaker","compress","passTLSClientCert","retry"]
    }
  },
  mounted () {
    this.refreshAll()
    this.getupstream()
  },
  methods: {
      editorInit: function () {
            require('brace/ext/language_tools') //language extension prerequsite...
            require('brace/mode/yaml')    //language
            require('brace/theme/chrome')
            // require('brace/snippets/yaml') //snippet
        },
    newUpst(){
      this.upstream_status = true
      this.upstream_service ={
            type: 0,
            name:"",
            ishcheck: false,
            healthcheck:"/",
            interval: "10s",
            timeout: "3s",
            upstream:[""],
        }
    },
    saveRouter(){
      DiyService.saveRouter(this.form)
        .then(body => {
          
          this.$q.dialog({
            dark: true,
            title: '提示',
            message: body.message
          })
        })
        .catch(error=>{
          console.log(error)
          return Promise.reject(error)
        })
    },
    saveupstream(){
       DiyService.saveMiddleware(this.midname, this.midtype,  this.yamlconf)
        .then(body => {
          this.$q.dialog({
            dark: true,
            title: '提示',
            message: body.message
          })
        })
        .catch(error => {
         this.$q.dialog({
            dark: true,
            title: '提示',
            message: "保存失败,请刷新页面"
          })
          return Promise.reject(error)
        })
    },
    addUpstream(index){
        let upstream = this.upstream_service.upstream
        upstream.splice(index, 0, "")
        this.upstream_service.upstream = upstream
    },
    delUpstream(index){
        let upstream = this.upstream_service.upstream
        upstream.splice(index, 1)
        this.upstream_service.upstream = upstream
    },
    refreshAll(){


      if (this.$route.params.name){
          let str = this.$route.params.name
          let sar = str.split("@")
          this.midname = sar[0]
         DiyService.getMiddle(this.midname)
        .then(body => {
        
         if(body.error == 0){
           this.ctype = true
            this.yamlconf = body.data
            this.canedit = true
            this.midtype = body.message
          }
          return body
        }).catch(error=>{
          return Promise.reject(error)
        })
      }else{
        this.ctype = false
        this.canedit = true
      }
       
    },
    getupstream(){
        DiyService.getupstream()
        .then(body => {
          console.log(body)
          if (body.error == 0 && body.data.length>0)
            this.upstreamlist = body.data
          return body
        }).catch(error=>{
          return Promise.reject(error)
        })
    },
  },
  watch: {
    'status' () {
      this.refreshAll()
    },
    'filter' () {
      this.refreshAll()
    }
  },
  
  beforeDestroy () {
  }
}
</script>

<style scoped lang="scss">

</style>
